<!-- 排班管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <div class="app-container">
      <!-- 检索模块 -->
      <el-card class="box-card">
        <el-form ref="form">
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="员工账号："
                label-width="85px"
              >
                <el-input
                  v-model="formData.employeeNumber"
                  clearable
                  placeholder="请输入员工账号"
                  @clear="clearInput"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="员工姓名："
                label-width="85px"
              >
                <el-input
                  v-model="formData.name"
                  placeholder="请输入员工姓名"
                  clearable
                  @clear="clearInput"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="工作模式："
                label-width="85px"
              >
                <el-select
                  v-model="formData.workPatternId"
                  v-loading="WorkHistoryListLoading"
                  element-loading-text="加载中"
                  placeholder="请选择工作模式"
                  @visible-change="selectChange"
                >
                  <el-option
                    v-for="(item, index) in WorkHistoryList"
                    :key="index"
                    :label="item.name"
                    :value="item.workPatternId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item
                label="月份："
                label-width="85px"
              >
                <el-date-picker
                  v-model="formData.month"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="请选择月份"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="所需机构："
                label-width="85px"
              >
                <treeSelect
                  ref="treeSelect"
                  :props="defaultProps"
                  :options="agencyList"
                  :value="valueId"
                  :clearable="isClearable"
                  :accordion="isAccordion"
                  @getValue="getValue($event)"
                ></treeSelect>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item>
                <el-button
                  type="warning"
                  @click="onSubmit"
                >搜索</el-button>
                <el-button
                  type="warning"
                  plain
                  @click="reset"
                >重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 列表 -->
      <el-card
        class="box-card"
        style="margin-top: 20px"
      >
        <!-- 按钮组 -->
        <el-row style="margin-bottom: 20px;">
          <el-button
            type="warning"
            @click="$router.push({ name: 'workArrange-setting' })"
          >排班设置</el-button>
          <el-button
            type="warning"
            plain
            @click="BindingScheduling"
          >绑定排班</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="加载中"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          @select="select"
          @select-all="selectAll"
        >
          <el-table-column type="selection"> </el-table-column>
          <el-table-column
            fixed
            label="员工账号"
            width="120px"
            prop="employeeNumber"
          > </el-table-column>
          <el-table-column
            fixed
            label="员工姓名"
            width="120px"
            prop="name"
          > </el-table-column>
          <el-table-column
            fixed
            label="员工电话"
            prop="phone"
            width="120px"
          > </el-table-column>
          <el-table-column
            fixed
            label="员工角色"
            width="120px"
            prop="userType"
          >
            <template #default="{ row }">
              {{ CheckUserType(row.userType) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            label="当前工作模式"
            width="120px"
            prop="workPatternName"
          >
          </el-table-column>
          <el-table-column
            v-for="(item, index) in length"
            :key="index"
            :label="item.toString()"
          >
            <template #default="{ row }">
              <div :class="getWorkDetailSchedule(row, index) === '上' ? 'work' : 'rest'">{{ getWorkDetailSchedule(row,
                                                                                                                 index) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pagination">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <workArrangeDialog
      :dialog-visible="dialogVisible"
      :selected-list="selectedList"
      @closeDialog="dialogVisible = false"
      @render="getWorkSchedulings"
    ></workArrangeDialog>
  </div>
</template>
<script>
import { workManage, selectWorkHistoryList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
import treeSelect from './components/treeSelect.vue'
import workArrangeDialog from './components/workArrangeDialog.vue'
export default {
  name: 'WorkArrangeManage',
  components: {
    treeSelect,
    workArrangeDialog
  },
  data() {
    return {
      formData: {
        employeeNumber: '',
        name: '',
        workPatternId: '',
        month: '',
        agencyId: null
      },
      pageParams: {
        page: 1,
        pageSize: 10
      },
      defaultProps: {
        value: 'id', // ID字段名
        label: 'name',
        children: 'children'
      },
      tableData: [],
      WorkHistoryList: [],
      agencyList: [],
      total: null,
      length: null,
      loading: false,
      WorkHistoryListLoading: false,
      dialogVisible: false,
      isClearable: true, // 可清空（可选）
      isAccordion: false, // 可收起（可选）
      valueId: '0', // 初始ID（可选）
      selectedLength: null,
      selectedList: []
    }
  },
  async created() {
    await this.getAgencyList()
  },
  async mounted() {
    await this.getWorkSchedulings()
    await this.getSelectWorkHistoryList()
  },
  methods: {
    async getWorkSchedulings() {
      this.loading = true
      try {
        const { data: res } = await workManage({ ...this.pageParams, ...this.formData })
        this.total = +res.counts
        this.tableData = res.items
        this.length = this.tableData[0].workSchedules.length
      } catch (error) {
        this.$message.error('未查找到符合条件的数据')
        console.log(error)
      }
      this.selectedLength = 0
      this.selectedList = []
      this.loading = false
    },
    CheckUserType(userType) {
      const UserMap = {
        1: '员工',
        2: '快递员',
        3: '司机'
      }
      return UserMap[userType]
    },
    getWorkDetailSchedule(row, index) {
      for (let i = 0; i < row.workSchedules.length; i++) {
        if (index === i) {
          return row.workSchedules[i] === true ? '上' : '休'
        }
      }
    },
    async getSelectWorkHistoryList() {
      this.WorkHistoryList = []
      const { data: res } = await selectWorkHistoryList()
      for (const key in res) {
        res[key].forEach(item => {
          this.WorkHistoryList.push({ name: item.name, workPatternId: item.id })
        })
      }
    },
    async selectChange(val) {
      if (val) {
        this.WorkHistoryListLoading = true
        await this.getSelectWorkHistoryList()
        this.WorkHistoryListLoading = false
      }
    },
    async getAgencyList() {
      const { data } = await agencyList()
      this.agencyList = JSON.parse(data)
    },
    // 取值
    getValue(value) {
      if (value !== null) {
        this.valueId = value
        this.formData.agencyId = value
      } else {
        this.valueId = '0'
        this.formData.agencyId = null
      }
    },
    onSubmit() {
      try {
        this.getWorkSchedulings()
      } catch (error) {
        console.log(error)
      }
    },
    clearInput() {
      this.getWorkSchedulings()
    },
    async reset() {
      this.formData = {
        employeeNumber: '',
        name: '',
        workPatternId: '',
        month: '',
        agencyId: null
      }
      this.$refs.treeSelect.clearHandle()
      await this.getWorkSchedulings()
    },
    BindingScheduling() {
      if (!this.selectedLength) {
        this.$message.error('请选择调整人员')
      } else {
        this.dialogVisible = true
      }
    },
    select(selection, row) {
      this.selectedList.push(row.id)
      this.selectedLength = selection.length
    },
    selectAll(selection) {
      this.selectedLength = selection.length
      this.selectedList = this.tableData.map(item => item.id)
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.pageParams.page = 1
      this.getWorkSchedulings()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getWorkSchedulings()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ th.date {
  .cell {
    padding-left: 17px !important;
  }
}

.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}

.history-name {
  width: auto !important;

  /deep/ .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  /deep/ .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }

  /deep/ .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
  /deep/ .el-form-item__content {
    margin-left: 40px !important;
  }

  /deep/ .el-radio:first-child {
    margin-right: 80px !important;
  }

  /deep/.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 40px;
}
/deep/ .el-pager li.active {
    color: #e15536;
    cursor: default;
  }

.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;

  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}

/deep/ .el-card {
  overflow: initial;
}
</style>

<style lang="scss" scoped>
.app-container {
  background-color: #f3f4f7;
  padding: 23px 20px 20px 20px;

  // background-color: #f3f4f7;
  .el-col {
    padding-left: 30px;
    padding-right: 30px;
    color: red;

    .el-form-item {

      // width: 80px;
      // font-weight: normal;
      .el-form-item__content {
        margin-left: 80px;
      }
    }
  }

  .work {
    width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
  }

  .rest {
    width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 13px;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 40px;
  }
}

/deep/ .el-dialog {
  width: 566px;

  .el-dialog__body {
    padding: 30px 50px 10px 50px !important;

    .el-radio__input.is-checked+.el-radio__label {
      color: #000;
    }
  }
}
</style>
